<template>
  <transition name="fade">
    <div class="shade" v-show="isShow">
      <transition name="bounce">
        <div :class="['dialog', {'only_msg': !btns}]" v-show="isShow">
          <i class="iconfont icon-cuowu1" @click.stop="close"></i>
          <div class="dialogs_msg" v-html="msg"></div>
          <ul class="dialogs_btn" v-if="btns">
            <li
              v-for="(item, index) in btns"
              @click.stop="goto(item.href)"
              :key="index"
              v-html="item.value">
            </li>
          </ul>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'dialog',
    data: function () {
      return {
        isShow: false
      }
    },
    props: ['msg', 'btns'],
    methods: {
      close: function () {
        this.$set(this, 'isShow', false);
      },
      goto: function (path) {
        if (path === 'close') {
          this.close();
        } else {
          this.$router.push(path);
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "../assets/scss/config";

  .shade {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);

    .dialog {
      background-color: #e7c598;
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      width: setRem(413px);
      min-height: setRem(250px);
      max-height: setRem(500px);
      overflow: hidden;
      border-radius: setRem(8px);
      margin: auto;
      font-size: setRem(20px);
      line-height: 1.3em;
      text-align: center;
      transform: translateY(-50%);

      &.only_msg {
        height: setRem(250px);

        &::before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          height: 100%;
        }
        .dialogs_msg {
          display: inline-block;
          vertical-align: middle;
          margin: setRem(42px) auto;
          box-sizing: border-box;
          max-height: setRem(192px);
          overflow: auto;
        }
      }

      i {
        position: absolute;
        right: setRem(16px);
        top: setRem(10px);
        color: #bf0c21;
        width: setRem(36px);
        height: setRem(36px);
        font-size: setRem(36px);
        line-height: setRem(36px);
      }

      .dialogs_msg {
        width: setRem(360px);
        margin: auto;
        margin-top: setRem(42px);
        color: #bf0c21;
        line-height: setRem(32px);

        &:not(:last-child) {
          margin-bottom: setRem(18px);
        }

        em {
          display: inline-block;
          border-bottom: 1px solid #bf0c21;
          color: #ff6600;
          font-size: 1.2em;

          &:not(:empty) {
            padding: 0 setRem(4px);
          }
        }
      }

      ul.dialogs_btn {
        margin-bottom: setRem(32px);

        li {
          display: inline-block;
          background-color: #bf0c21;
          color: #e7c598;
          border-radius: setRem(8px);
          width: setRem(327px);
          padding: setRem(10px) setRem(12px);
          box-sizing: border-box;
          margin-bottom: setRem(18px);
        }
      }
    }
  }

  .bounce-enter-active {
    animation: bounce-in 0.36s;
  }

  .bounce-leave-active {
    animation: bounce-out 0.36s;
  }

  @keyframes bounce-in {
    0% {
      transform: translateY(-50%) scale(0);
    }
    50% {
      transform: translateY(-50%) scale(1.2);
    }
    100% {
      transform: translateY(-50%) scale(1);
    }
  }

  @keyframes bounce-out {
    0% {
      transform: translateY(-50%) scale(1);
    }
    50% {
      transform: translateY(-50%) scale(1.2);
    }
    100% {
      transform: translateY(-50%) scale(0);
    }
  }
</style>
